<template>
  <div>
    <div ref="masonryContainer">
      <div
        v-for="(video,index) in videos"
        :key="index"
      >
        <VideoItem
          class="item"
          :videoData="video"
          @slide="openSwiperFulleScreen(index)"
        />
      </div>
    </div>
  </div>
</template>

<script>
// 引入瀑布流式布局库
import Masonry from "masonry-layout";
import VideoItem from "@/views/VideoItem";
export default {
  name: "myVideo",
  data() {
    return {
      videos: [
        {
          title: "hehe1",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/2.mp4",
        },
        {
          title: "hehe2",
          videoUrl:
            "http://s33iwztmt.hb-bkt.clouddn.com/liNc-NpAAPTC-Pp-ljhrHwgPgEYW",
        },
        {
          title: "hehe3",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/3.mp4",
        },
        {
          title: "hehe4",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/4.mp4",
        },
        {
          title: "hehe5",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/1.mp4",
        },
        {
          title: "hehe6",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/2.mp4",
        },
        {
          title: "hehe7",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/4.mp4",
        },
        {
          title: "hehe8",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/1.mp4",
        },
        {
          title: "hehe9",
          videoUrl:
            "http://s33iwztmt.hb-bkt.clouddn.com/liNc-NpAAPTC-Pp-ljhrHwgPgEYW",
        },
      ],
      swiper: null,
      swiperOptions: null,
    };
  },
  components: {
    VideoItem,
  },
  created() {
    this.$nextTick(() => {
      const masonry = new Masonry(this.$refs.masonryContainer, {
        itemSelector: ".item",
        columnWidth: 320,
        // originLeft: false,
      });
      masonry.layout();
    });
  },
  methods: {
    openSwiperFulleScreen(index) {
      console.log(index);
      // 初始化swiper
      this.swiper = new Swiper(".swiper-container", {
        centeredSlides: true,
        initalSlide: index,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        direction: "vertical",
        watchOverflow: true,
        scrollbar: {
          el: ".swiper-scrollbar",
        },
        preventClicks: false,
        mousewheel: true,
      });
      this.swiper.on("reachEnd", this.nextVideo(index));
      this.swiper.on("reachBeginning", this.prevVideo(index));
      document.addEventListener("mousewheel", this.handleMouseWheel(index));
    },
  },
  beforeDestroy() {
    this.swiper.destroy();
    document.removeEventListener("wheel", this.handleMouseWheel);
  },
};
</script>

<style scoped>
.item {
  margin-bottom: 10px;
}
</style>